<template>
  <el-dialog
    v-if="orderDatalist"
    v-loading="loading"
    :title="$t('refundslipinformation')"
    :visible.sync="dialogVisible"
    width="700px"
  >
    <div class="description">
      <div class="title">{{ $t("userinformation") }}</div>
      <div class="acea-row">
        <div class="description-term">
          {{ $t("usernickname") }}：{{ orderDatalist.user.nickname }}
        </div>
        <div class="description-term">
          {{ $t("returnedby") }}：{{ orderDatalist.order.real_name }}
        </div>
        <div class="description-term">
          {{ $t("contactnumber") }}：{{ orderDatalist.order.user_phone }}
        </div>
        <div class="description-term">
          {{ $t("Return.address") }}：{{ orderDatalist.order.user_address }}
        </div>
        <div class="description-term">
          {{ $t("remarks") }}{{ orderDatalist.mark }}
        </div>
      </div>
      <el-divider />
      <div class="title">
        {{ orderDatalist.refund_type == 1 ? $t('Refund.information') : $t('Returned.goods.information') }}
      </div>
      <div class="acea-row">
        <div class="description-term">
          {{ $t("orderno") }}：{{ orderDatalist.order.order_sn }}
        </div>
        <div class="description-term">
          {{ $t("orderstatus") }}：{{
            orderDatalist.status | orderRefundFilter
          }}
        </div>
        <div class="description-term100">
          {{ $t("refundno") }}：{{ orderDatalist.refund_order_sn }}
        </div>
        <div class="description-term100">
          {{ $t("Refund.product.name") }}：
          <div class="product_name">
            <div
              v-for="(item, index) in orderDatalist.refundProduct"
              :key="index"
            >
              <span
                v-if="
                  item.product &&
                  item.product.cart_info &&
                  item.product.cart_info.product
                "
                >{{ item.product.cart_info.product.store_name }}</span
              >
            </div>
          </div>
        </div>
        <div class="description-term">
          {{ $t("numberofrefundedproducts") }}：{{ orderDatalist.refund_num }}pcs
        </div>
        <!--<div class="description-term">{{ $t('totalrefundamount') }}：{{ orderDatalist }}</div>-->
        <div class="description-term">
          {{ $t("totalrefundamount") }}：{{ orderDatalist.refund_price }}$
        </div>
        <!--<div class="description-term">{{$t('usernotes')}}：{{ orderDatalist.coupon_price }}</div>-->
        <div class="description-term">
          {{ $t("creationtime") }}：{{ orderDatalist.create_time }}
        </div>
        <div class="description-term">
          {{ $t("merchantremarks") }}：{{ orderDatalist.mer_mark }}
        </div>
      </div>
      <el-divider />
      <div class="title">{{ $t("orderrecord") }}</div>
      <el-table
        v-loading="LogLoading"
        border
        :data="tableDataLog.data"
        style="width: 100%"
      >
        <el-table-column
          prop="refund_order_id"
          align="center"
          :label="$t('refundslipid')"
          min-width="80"
        />
        <el-table-column
          prop="change_message"
          :label="$t('operationrecord')"
          align="center"
          min-width="280"
        />
        <el-table-column
          prop="change_time"
          :label="$t('operationtime')"
          align="center"
          min-width="280"
        />
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="tableFromLog.limit"
          :current-page="tableFromLog.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableDataLog.total"
          @size-change="handleSizeChangeLog"
          @current-change="pageChangeLog"
        />
      </div>
      <el-divider />
      <div
        v-if="
          (orderDatalist.status == 2 || orderDatalist.status == 3) &&
          orderDatalist.refund_type == 2
        "
      >
        <div class="title">{{ $t("returnlogisticsinformation") }}</div>
        <div class="acea-row">
          <div class="description-term">
            {{ $t("courierservices") }}：{{ orderDatalist.delivery_type }}
          </div>
          <div class="description-term">
            {{ $t("couriernumber") }}：{{ orderDatalist.delivery_id }}
          </div>
          <el-button size="small" type="primary" @click="getLoginstics">{{
            $t("logisticsquery")
          }}</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { refundorderLogApi } from "@/api/order";
export default {
  name: "OrderDetail",
  props: {
    orderDatalist: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      dialogVisible: false,
      LogLoading: false,
      // orderDatalist: null,
      loading: false,
      listLoading: true,
      order_id: "",
      tableDataLog: {
        data: [],
        total: 0,
      },
      tableFromLog: {
        page: 1,
        limit: 5,
      },
    };
  },
  mounted() {},
  methods: {
    // 订单记录
    onOrderLog(id) {
      this.LogLoading = true;
      this.order_id = id;
      refundorderLogApi(id, this.tableFromLog)
        .then((res) => {
          this.tableDataLog.data = res.data.list;
          this.tableDataLog.total = res.data.count;
          this.LogLoading = false;
        })
        .catch((res) => {
          this.$message.error(res.message);
          this.LogLoading = false;
        });
    },
    /**查看物流 */
    getLoginstics() {
      this.$emit("get-logistics", this.orderDatalist);
    },
    pageChangeLog(page) {
      this.tableFromLog.page = page;
      this.onOrderLog(this.order_id);
    },
    handleSizeChangeLog(val) {
      this.tableFromLog.limit = val;
      this.onOrderLog(this.order_id);
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  margin-bottom: 16px;
  color: #17233d;
  font-weight: 500;
  font-size: 14px;
}
.description {
  &-term {
    display: table-cell;
    padding-bottom: 10px;
    line-height: 20px;
    width: 50%;
    font-size: 12px;
  }
}
.description-term100 {
  display: table-cell;
  padding-bottom: 10px;
  line-height: 20px;
  width: 100%;
  font-size: 12px;
}
.product_name {
  margin-left: 90px;
  position: relative;
  top: -20px;
}
</style>
